<template>
  <TabPane
    :name="name"
    :label="label"
    class="post-box"
  >
    <div
      v-for="post in posts"
      :key="`post-${post.id}`"
      class="post-item"
    >
      <router-link
        to="/"
        class="cover"
      >
        <img
          :src="fullUrl(post.coverImage)"
          :alt="post.title"
        >
      </router-link>
      <router-link
        to="/"
        class="title"
      >
        {{ post.title }}
      </router-link>
      <div class="meta">
        <span>{{ post.viewCount }}</span>
      </div>
    </div>
  </TabPane>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { Post, getPosts } from '@/api/resources'
import { cdn } from '@/utils'

@Component({
  name: 'PostsTab'
})
export default class extends Vue {
  private readonly name = 'post'
  private readonly label = '投稿'
  @Prop() userId!: number
  private posts: Partial<Post>[] = []

  get params (): CreateQueryParams {
    return {
      search: {
        'uploadedByUser.id': this.userId
      },
      join: [
        { field: 'uploadedByUser', select: ['id'] }
      ]
    }
  }

  async created () {
    this.posts = (await getPosts(this.params)).data
  }

  private fullUrl = cdn
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.post-box {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.post-item {
  width: 160px;
  margin: 0 0 3px;
  .cover {
    background: @img-placeholder 50%;
    background-size: cover;
    border-radius: 4px;
    display: block;
    width: 160px;
    height: 100px;
    overflow: hidden;
    position: relative;
    img {
      border-radius: 4px;
      // display: block;
      width: 160px;
      height: 100px;
    }
  }
  .title {
    // display: block;
    line-height: 20px;
    height: 38px;
    margin-top: 6px;
    overflow: hidden;
  }
  .meta {
    color: @text-color-secondary;
    white-space: nowrap;
    font-size: 0;
    margin-top: 6px;
    height: 14px;
    line-height: 14px;
  }
}
</style>
